<script setup lang="ts">
import { onMounted, ref } from 'vue';
import useElementPlusStore from '@/stores/UseElementPlusStore';
import { getCategoryProjectApi } from '@/api/webSite'
import { CategoryProjectModel } from '@/api/webSite/response'

const category_projects = ref<Array<CategoryProjectModel>>([])
onMounted(async () => {
  category_projects.value = await getCategoryProjectApi();
  useElementPlusStore().closeLoad();
})

</script>

<template>

  <div class="mainBody">
    <div class="content">
      <div class="project-content" v-for="cp in category_projects" :key="cp.category">
        <h3>{{ cp.category }}</h3>
        <div class="projects">
          <projectCard class="projectCard" :project="i" v-for="i in cp.projects" :key="i.id" />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.mainBody {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;

  .content {
    margin-top: 90px;
    width: 80%;

    .project-content {

      h3 {
        font-size: 26px;
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
      }

      .projects {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: end;
        margin-top: 10px;
        margin-bottom: 10px;

        .projectCard {
          margin: 8px;
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
